<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/">
        <a href="/">客户项目</a>
      </el-menu-item>
      <el-menu-item index="/project">
        <a href="/nf-plat-vite2-vue3/project" target="_blank">客户项目（gitee）</a>
      </el-menu-item>
    </el-menu>
    <!--多标签的增删改查-->
    <el-row class="tac">
      <el-col :span="3">
        <!--菜单-->
        <nf-menu/>
      </el-col>
      <el-col :span="21">
        <!--tab-->
        <nf-tabs/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
// 组件
import nfMenu from './views/project/menu.vue'
import nfTabs from './views/project/tab.vue'

// tab 的状态
import tabManage from './controller/state-tab.js'

export default {
  name: 'project-index'
}

</script>

<script setup>

// 列表的状态管理类
const { regState } = tabManage()
// 注册 tab 的状态
const tabState = regState()

const activeIndex = ref('/')

const handleSelect = () => {
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 10px;
}
</style>
